import { useState } from "react";
import IconFont from "@/components/IconFont";
import { Space } from "antd";
// 自定义排序组件
const SingleOrManySort = ({
	value,
	title,
	defaultSortMap = {
		1: "单",
		2: "多"
	},
	defaultValue = null,
	onClick
}) => {
	const defaultSorts = Object.keys(defaultSortMap).map(key => key);
	const [order, setOrder] = useState(defaultValue);
	function toggleOrder(key) {
		setOrder(key);
		onClick && onClick(key);
	}
	return (
		<div className="flx-justify-between">
			{title}
			<Space>
				{defaultSorts.map(
					key =>
						defaultSortMap[key] && (
							<span
								key={key}
								style={{ border: `1px solid ${value?.current === key ? "#1890ff" : "#ccc"}`, padding: "0 4px" }}
								onClick={() => {
									toggleOrder(key);
								}}
							>
								{defaultSortMap[key]}
							</span>
						)
				)}
			</Space>
		</div>
	);
};
export default SingleOrManySort;
